<template>
  <el-input
    v-model="localValue"
    type="textarea"
    :rows="rows"
    :placeholder="placeholder"
    class="wang-editor"
  />
</template>

<script setup lang="ts">
import { watch, ref, computed } from "vue";

const props = defineProps<{
  modelValue?: string;
  rows?: number;
  placeholder?: string;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", value: string): void;
}>();

const rows = computed(() => props.rows ?? 6);
const placeholder = computed(() => props.placeholder ?? "请输入内容");

const localValue = ref(props.modelValue ?? "");

watch(
  () => props.modelValue,
  value => {
    if (value !== localValue.value) {
      localValue.value = value ?? "";
    }
  }
);

watch(localValue, value => {
  emit("update:modelValue", value);
});
</script>

<style scoped>
.wang-editor :deep(textarea) {
  min-height: 160px;
  line-height: 1.5;
}
</style>
